import React, {FC, useEffect} from "react";
import styles from "./Login.module.scss";

import {Space, Typography, Form, Input, Button, Checkbox, message} from "antd";
import {UserAddOutlined} from "@ant-design/icons";
import {Link, useNavigate} from "react-router-dom";
import {MANAGE_INDEX_PATH, REGISTER_PATH} from "../router";
import {useRequest} from "ahooks";
import {loginService} from "../services/user";
import {setToken} from "../utils/user-token";

const {Title} = Typography;


const USERNAME_KEY = "username";
const PASSWORD_KEY = "password";

function rememberUser(username: string, password: string) {
    localStorage.setItem(USERNAME_KEY, username);
    localStorage.setItem(PASSWORD_KEY, password);
}

function deleteUserFromStorage() {
    localStorage.removeItem(USERNAME_KEY);
    localStorage.removeItem(PASSWORD_KEY);
}

function getUserInfoFromStorage() {
    return {
        username: localStorage.getItem(USERNAME_KEY),
        password: localStorage.getItem(PASSWORD_KEY),
    }
}

const Login: FC = () => {

    const [form] = Form.useForm();

    const nav = useNavigate();

    const {run} = useRequest(async values => {
        const {username, password} = values
        const data = await loginService(username, password)
        return data
    }, {
        manual: true
        , onSuccess: (result) => {
            setToken(result.token)
            message.success("登录成功")
            nav(MANAGE_INDEX_PATH)
        }
    })


    useEffect(() => {
        const {username, password} = getUserInfoFromStorage();
        form.setFieldsValue({username, password});
    }, [])


    function onFinish(values: any) {
        console.log('Success:', values);
        const {username, password, remember} = values || {}
        run(values)

        if (values.remember) {
            rememberUser(username, password);

        } else {
            deleteUserFromStorage();
        }
    }

    return (
        <div className={styles.container}>
            <div>
                <Space>
                    <Title level={2}><UserAddOutlined/></Title>
                    <Title level={2}>登录</Title>
                </Space>
            </div>
            <div>

                <Form labelCol={{span: 6}}
                      wrapperCol={{span: 16}}
                      onFinish={onFinish}
                      initialValues={{remember: true}}
                      form={form}
                >
                    <Form.Item label="用户名" name="username" rules={[{required: true, message: '请输入用户名'}]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="密码" name="password" rules={[{required: true, message: '请输入用户名'}]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                    <Form.Item name="remember" valuePropName="checked" wrapperCol={{offset: 6, span: 16}}>
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 6, span: 16}}>
                        <Space>
                            <Button type="primary" htmlType="submit">登录</Button>
                            <Link to={REGISTER_PATH}>注册新用户</Link>
                        </Space>
                    </Form.Item>
                </Form>


            </div>


        </div>
    )
}

export default Login